.cookie-notice {
    @include content-wrapper;
    background-color: $amber;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: $zindex-cookie-notice;
    padding: 16px;
    // to avoid flash before animation
    display: none;

    &.open {
        display: block;
        animation: 400ms ease slide-in forwards;
    }

    .cookie-notice__inner {
        font-weight: 700;
        max-width: $lg;
        margin: auto;
        line-height: 1.5;
        text-align: center;

        @include lg-up {
            display: flex;
            justify-content: space-between;
        }
    }

    .cookie-notice__text {
        margin: 0;
        a {
            @include owid-link-90;
        }

        @include lg-up {
            text-align: left;
        }
    }

    .actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        margin-top: 16px;

        @include md-up {
            margin-top: 0;
        }
    }

    .button {
        font-weight: 700;
        line-height: 1.2;
        padding: 10px 16px;
        color: $text-color;
        cursor: pointer;
        border: 2px solid rgba($text-color, 0.2);
        transition: border-color 150ms linear;
        margin-top: 8px;
        background-color: transparent;

        @include md-up {
            flex: 0;
            font-size: 1rem;
            margin-top: 0;
        }

        &:hover {
            border-color: rgba($text-color, 0.8);
        }

        &:not(:last-child) {
            margin-right: 12px;
        }

        .icon {
            margin-right: 0.5rem;
        }
    }

    .button.accept {
        background-color: $oxford-blue;
        border-color: $oxford-blue;
        color: #fff;
        transition:
            background-color 150ms linear,
            border-color 150ms linear;
        min-width: 196px;

        &:hover {
            background-color: $oxford-blue;
            border-color: $oxford-blue;
        }
    }
}

@keyframes slide-in {
    0% {
        opacity: 0; // prevent flickering when animation starts
        transform: translate(0, 100%);
    }
    1% {
        opacity: 1;
    }
    100% {
        transform: translate(0, 0);
    }
}
